<template>
  <div class="sys-main-content">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="col-content">
          <div class="sys-search">
            <el-input v-model="dictParams.code" placeholder="请输入字典编码"></el-input>
            <el-button type="primary" @click="searchDict">查询</el-button>
            <el-button type="primary" @click="addDict('dict')">新增</el-button>
          </div>
          <div class="sys-table">
            <el-table
              :data="dictData"
              style="width: 100%"
              :row-style="{ cursor: 'pointer' }"
              @row-click="choseDict"
            >
              <el-table-column
                v-for="column in dictTableOptions"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="editDict(scope.row)">编辑</el-button>
                  <el-button size="mini" type="text" @click="removeDict(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="sys-pagination">
            <el-pagination
              background
              :current-page="dictParams.current"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="dictParams.size"
              layout="total, sizes, prev, pager, next"
              :total="dictParams.total"
              @size-change="dictSizeChange"
              @current-change="dictCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="col-content">
          <div class="sys-search">
            <!-- <el-input v-model="" placeholder="请输入字典项编码"></el-input> -->
            <!-- <el-button type="primary" @click="searchDictItem">查询</el-button> -->
            <el-button type="primary" @click="addDict('dictItem')">新增</el-button>
          </div>
          <div class="sys-table">
            <el-table
              :data="dictItemData"
              style="width: 100%"
            >
              <el-table-column
                v-for="column in dictItemTableOptions"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
              >
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="editDict(scope.row)">编辑</el-button>
                  <el-button size="mini" type="text" @click="removeDict(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <add-or-update-dialog
      ref="addOrUpdateDialog"
      :add-params="addParams"
      @addOrUpdateDict="addOrUpdateDict"
    />
  </div>
</template>

<script>
import { getDictList, addOrUpdateDict, removeDictById, getDictItemList } from '@/api/dict'
import addOrUpdateDialog from './addOrUpdateDialog.vue'
import _ from 'lodash'
export default {
  name: 'BusDict',
  components: {
    addOrUpdateDialog
  },
  data() {
    return {
      dictTableOptions: [
        {
          label: '字典名称',
          prop: 'name'
        },
        {
          label: '字典编码',
          prop: 'code'
        },
        {
          label: '备注',
          prop: 'remark'
        }
      ],
      dictData: [],
      dictParams: {
        code: '',
        current: 1,
        name: '',
        size: 10,
        total: 0
      },
      dictItemTableOptions: [
        {
          label: '名称',
          prop: 'name'
        },
        {
          label: '值',
          prop: 'value'
        },
        {
          label: '排序',
          prop: 'orderNum'
        }
      ],
      dictItemData: [],
      addParams: {
        code: '',
        id: '',
        name: '',
        orderNum: 0,
        parentId: '',
        remark: '',
        value: ''
      },
      curDict: {}
    }
  },
  created() {
    // 查询字典列表
    this.getDictList()
  },
  methods: {
    // 获取字典列表
    getDictList() {
      getDictList(this.dictParams).then(res => {
        // 默认获取第一个字典
        if (this.dictData.length === 0) {
          this.curDict = res.list[0]
          this.searchDictItem()
        }
        this.dictData = res.list
        this.dictParams.total = res.totalCount
      })
    },
    /**
     * 字典
    **/
    // 切换size
    dictSizeChange(val) {
      this.dictParams.current = 1
      this.dictParams.size = val
      this.getDictList()
    },
    // 切换分页
    dictCurrentChange(val) {
      this.dictParams.current = val
      this.getDictList()
    },
    // 查询字典
    searchDict() {
      this.dictParams.current = 1
      this.getDictList()
    },
    // 点击字典
    choseDict(row) {
      this.curDict = _.cloneDeep(row)
      getDictItemList(row.id).then(res => {
        this.dictItemData = res
      })
    },
    /**
     * 字典项
    **/
    // 查询字典
    searchDictItem() {
      getDictItemList(this.curDict.id).then(res => {
        this.dictItemData = res
      })
    },
    // 新增字典/字典项
    addDict(value) {
      this.addParams = {
        code: '',
        id: '',
        name: '',
        orderNum: 0,
        parentId: '',
        remark: '',
        value: ''
      }
      if (value === 'dict') {
        this.addParams.parentId = '0'
        this.$refs['addOrUpdateDialog'].title = '新增字典'
      } else if (value === 'dictItem') {
        this.addParams.code = this.curDict.code
        this.addParams.parentId = this.curDict.id
        this.$refs['addOrUpdateDialog'].title = '新增字典项'
      }
      this.$refs['addOrUpdateDialog'].dialogVisible = true
    },
    // 新增/修改字典
    addOrUpdateDict() {
      addOrUpdateDict(this.addParams).then(res => {
        if (this.addParams.parentId === '0') {
          this.searchDict()
        } else {
          this.searchDictItem()
        }
      })
    },
    // 删除字典/字典项
    removeDict(id) {
      this.$confirm('确定进行删除操作? 删除该字典后，关联的字典项也会被删除!', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeDictById(id).then(res => {
          this.searchDict()
          this.searchDictItem()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {})
    },
    // 编辑字典/字典项
    editDict(row) {
      this.addParams = _.cloneDeep(row)
      if (row.parentId === '0') {
        this.$refs['addOrUpdateDialog'].title = '编辑字典'
      } else {
        this.$refs['addOrUpdateDialog'].title = '编辑字典项'
      }
      this.$refs['addOrUpdateDialog'].dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  height: calc(100vh - 100px);
  .el-col {
    height: 100%;
  }
}
.col-content {
  height: calc(100vh - 100px)
}
</style>
